<template>
	<view class="main">
			<u-overlay :show="share" @click="close" :zoom="false" :custom-style="{ background: 'rgba(0,0,0,.8)' }" :duration="0">
		<view class="content "  @tap.stop >
				<image class="down" :src="require('../static/images/share/save.png') " mode="aspectFill" @click="html2canvas.create"></image>
			<view class="canvar"  :domId="domId" id="html2canvas" ref="html2canvas">				
			<img class="pic" :src="goods.thumb"></img>
			<view class="cont">
				<view class="left">
					<view class="item">
						<text>藏品名称：</text>
						<text>{{goods.title}}</text>
					</view>
					<view class="item">
						<text>创作者：</text>
						<text>{{goods.user_name}}</text>
					</view>
					<view class="item">
						<text>售价：</text>
						<text>¥{{goods.base_price}}</text>
					</view>
				</view>
				<view class="right">
					<div class="qrcode" >
						<img :src="qrUrl" mode="aspectFill" class="img"></img>
					</div>
				</view>
			</view>			
			</view>
		</view>
		</u-overlay>
		
		
		<u-popup :show="show" closeable @close="close">
			<view class="img">
				<block v-if="imgUrl">
					<image 
					:src="imgUrl" 
					:style="{width:imgWidth+'px',height: imgHeight+'px'}" mode="aspectFill"></image>
					<view class="tips">长按图片保存到相册</view>
				</block>
				<u-loading-page :loading="!imgUrl" loading-text="正在生成图片"></u-loading-page>
			</view>
			
		</u-popup>
	</view>
	
</template>

<script>
	export default {
		name:"html2canvas",
		props:{
			domId:'',
			show:{
				type:Boolean,
				default:()=>{
					return false
				}
			},
			share:{
				type:Boolean,
				default:()=>{
					return false
				}
			},
			goods:{
				type:Object,
				default:()=>{
					return {}
				}
			}
		},
		data() {
			return {
				qrUrl:'',
				imgUrl:'',
				imgHeight:100,
				imgWidth:100,
			};
		},
	mounted() {
		this.creatQrCode()
	},
		watch:{
			
		},
		methods:{
			async	creatQrCode() {
					let data = await this.$http({
						url:this.$api.inviteFriends,
						method: 'POST',
						hideLoading: true,
						data: {}
					})
					if(data.code==200){
						this.qrUrl=data.data.poster_path
					}
				
				},
			close(){
				this.$emit('close',false)
			},
// 保存到系统相册
				saveShareImg(base64) {
					uni.showLoading({
					  title: '正在生成图片'
					})
				// #ifdef H5
				this.savePicture(base64)	
				return									
				// #endif
				    const bitmap = new plus.nativeObj.Bitmap("test");
				    bitmap.loadBase64Data(base64, function() {
				        const url = "_doc/" + new Date().getTime() + ".png";  // url为时间戳命名方式
				        console.log('saveHeadImgFile', url)
				        bitmap.save(url, {
				            overwrite: true,  // 是否覆盖
				            quality: 'quality'  // 图片清晰度
				        }, (i) => {
				            uni.saveImageToPhotosAlbum({
				                filePath: url,
				                success: function() {
				                    uni.showToast({
				                        title: '图片保存成功',
				                        icon: 'none'
				                    })
									uni.hideLoading()
				                    bitmap.clear()
				                }
				            });
				        }, (e) => {
				            uni.showToast({
				                title: '图片保存失败',
				                icon: 'none'
				            })
							uni.hideLoading()
				            bitmap.clear()
				        });
				    }, (e) => {
				        uni.showToast({
				            title: '图片保存失败',
				            icon: 'none'
				        })
						uni.hideLoading()
				        bitmap.clear()
				    });
				},
				savePicture(base64) {
					var arr = base64.split(',');
					var bytes = atob(arr[1]);
					let ab = new ArrayBuffer(bytes.length);
					let ia = new Uint8Array(ab);
					for (let i = 0; i < bytes.length; i++) {
						ia[i] = bytes.charCodeAt(i);
					}
					var blob = new Blob([ab], {
						type: 'application/octet-stream'
					});
					var url = URL.createObjectURL(blob);
					var a = document.createElement('a');
					a.href = url;
					a.download = new Date().valueOf() + ".png";
					var e = document.createEvent('MouseEvents');
					e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
					a.dispatchEvent(e);
					URL.revokeObjectURL(url);
					uni.showToast({
						title: '保存成功！'
					});
					uni.hideLoading()
				}
			
		},
		
	}
	
</script>
<script module="html2canvas" lang="renderjs">
import html2canvas from 'html2canvas';
export default {
	props:{
		domId:''
	},
	data(){
		return{
			imgUrl:''
		}
	},
    methods: {      
		async create(domId) {
			console.log('执行',domId)
		            try {
		                const timeout = setTimeout(async ()=> {
		                    const shareContent = document.querySelector('#html2canvas');
		                    const canvas = await html2canvas(shareContent,{
		                        width: shareContent.offsetWidth,//设置canvas尺寸与所截图尺寸相同，防止白边
		                        height: shareContent.offsetHeight,//防止白边
		                        logging: true,
		                        useCORS: true,
								backgroundColor:null,
								scale:2,
								dpi:1000
		                    });
		                    const base64 = canvas.toDataURL('image/png', 2); 
		                   	this.$ownerInstance.callMethod('saveShareImg', base64);
		                    clearTimeout(timeout);
		                }, 500);
		            } catch(error){
		                console.log("错误",error)
		            }
		        }
    }
}
</script>
<style lang="scss" scoped>
	.main{
		
		.down{
			height: 84rpx;
			width: 84rpx;
			border-radius: 100%;
			margin-right: 10rpx;
			position: absolute;
			top: 20rpx;
			z-index: 9999;
			right: 30rpx;
		}
		.content{
			position: fixed;
			left: 0vw;
			top: 40%;
			transform: translate(-50%,-50%);
			left: 50%;
			.canvar{
				display: flex;
				align-items: center;
				flex-direction: column;
				width: 600rpx;
				font-size: 0;
				background: #cdccd1;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
			}
			.pic{
				width: 600rpx;
				height: auto;
				margin: 0;
				border-radius: 30rpx 30rpx 0rpx 0rpx;
			}
			.cont{
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #FFF;
				margin:25rpx;
				padding:20rpx;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				width: calc(100% - 90rpx);
				.left{
					text{
						font-size: 28rpx;
						font-weight: 400;
						color: #A0A0A0;
						line-height: 40rpx;
						&:nth-child(1){
							color: #131415;
						}
					}
				}
				.right{
					.qrcode{	
						    display: flex;
					    .img {
					       width: 158rpx;
					       height: 158rpx;
					        background-color: #fff; //设置白色背景色
					        padding: 6rpx; // 利用padding的特性，挤出白边
					        box-sizing: border-box;
							border-radius: 8rpx;
					    }
					}
				}
			}
		}
		
		.tips{
			font-size: 32rpx;
			font-weight: 400;
			color: #B9B9B9;
			line-height: 48rpx;
			margin-top: 44rpx;
		}
		::v-deep .u-popup__content {
			background-color:rgba(0,0,0,0.3)!important
		}
		.btn{
			background: #F2E0BC;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 30rpx;
			font-weight: 600;
			color: #4E422C;
			text-align: center;
			margin-top: 50rpx;
			border-radius: 8rpx;
		}
	}
</style>
